<template>
  <div>
    <div>我今年的年纪 <input type="text" v-model.number="age" /></div>
    <div>我明年的年龄{{ newAge }}</div>
    <div>我后年的年龄 <input type="text" v-model.number="newAge2" /></div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const age = ref(18);
// 不带set的计算属性
// computer计算结果返回的也是响应式值
let newAge = computed(() => {
  return age.value + 1;
});
// 带set的计算属性
let newAge2 = computed({
  get() {
    // age.value变化时，计算出后年年龄
    return age.value + 2;
  },
  set(val) {
    // 常用于双向绑定，newAge2的值变化时，基于用户设置的值，重新计算age.value
    return (age.value = val - 2);
  },
});
</script>
